<template>
  <div class="box">
     <div class="boxs">
          <div class="img">
          <img :src="food.image" alt="">
      </div>
      <div class="detail">
          <span>{{food.name}}</span>
          <div class="div"><span>月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span></div>
          <span>￥</span><span>{{food.price}}</span>
          <span v-if="oldPrice">￥</span><span>{{food.oldPrice}}</span>    
          <div class="getcart">
              加入购物车
          </div>
      </div>
      <div class="introduce">
          <div>商品介绍</div>
          <div>
              {{food.description}}
          </div>
      </div>
      <div class="evaluate">
          <div>商品评价</div>
          <div class="all">
              <div class="all1">全部<span>{{food.ratings.length}}</span></div>
              <!-- <div class="all2">推荐<span>{{haopinAll}}</span></div> -->
              <!-- <div class="all3">吐槽<span>{{chapinAll}}</span></div> -->
          </div>
      </div>
      <div class="onlyshow">
          只看有内容的评价
      </div>
      <div v-for="(item) in food.ratings" :key="item" class="tease">
           <div class="teaseStart">
              <div class="div"><div class="teaseStartLeft">
                  <span>2016-07-07&nbsp;&nbsp;&nbsp;12:34</span>
              </div>
                <div class="teaseStartRight">
                  <span>{{item.username}}</span>
                  <img :src="item.avatar" alt="">
              </div></div>
              <div class="teaseBottom">{{item.text}}
                </div>
          </div>
      </div>
     </div>
      
  </div>
    
</template>

<script>

export default {
     data(){
    return{
        food:[],
        haopinAll:[],
        chapinAll:[],
        ratingsAll:0,
        chapin:0,
        haopin:0
    }
},
    created:async function(){
    // let foods = this.$route.query.foods
    // let fooskey =   this.$route.query.key
    let {data} = await this.$http.get("api/getgoods")
    let foods = data[this.$route.query.foods]
    let fooskey=foods.foods[this.$route.query.key]
    this.food = fooskey
    }
}
</script>

<style lang="stylus" scoped>
w=100%; s1=24px; s2=28px; s3=32px; c=rgb(255,255,255);dw = 50%; bgc=#f3f5f7;
.box{
    width :w;
    height :w;
    background-color :bgc;
    overflow hidden
}
.boxs{
    width w;
    height w;
    overflow: auto
}
.img{
  width :w;  
  height :750px
  img{
      width :w;
        height :w;
  }
}
.detail{
    width :w;
    height 216px;
    padding: 36px
    position relative;
    background-color #fff
    margin-bottom: 32px
    border-bottom: 1px solid rgba(7,17,27,.1)
}
.detail>span:nth-of-type(1){
    display: inline-block
    font-size: 28px;
    color: rgb(7,17,27)
    font-weight: 700
    line-height: 28px
    margin-bottom: 16px
}
.div{
margin-bottom: 36px
line-height: 20px
}
.div>span:nth-of-type(1){
    font-size: 20px;
    color: rgb(147,153,159)
    margin-right: 24px
    
}
.div>span:nth-of-type(2){
    font-size: 20px;
    color: rgb(147,153,159)    
}
.detail>span:nth-of-type(2){
    font-size: 20px;
    font-weight: normal
    color: rgb(240,20,20)
}
.detail>span:nth-of-type(3){
    font-size: 28px;
    font-weight: 700
    color: rgb(240,20,20)
    margin-right: 32px
}
.detail>span:nth-of-type(4){
    font-size: 20px;
    font-weight: normal
    text-decoration: line-through;
}
.detail>span:nth-of-type(5){
    font-size: 28px;
    font-weight: 700
    text-decoration: line-through;
}
.getcart{
    width 148px;
    height 48px;
    border-radius: 24px;
    background-color rgb(0,160,220);
    text-align: center;
    line-height: 48px;
    position: absolute
    color: c;
    bottom: 36px;
    right: 36px;
    }
.introduce{
    width: w;
    min-height: 250px;
    padding: 36px
    background-color #fff
    border-top: 1px solid rgba(7,17,27,.1);
    border-bottom: 1px solid rgba(7,17,27,.1);
    margin-bottom: 32px
}
.introduce>div:nth-of-type(1){
    font-size: s2;
    font-weight: 700;
    color: rgb(7,17,18)
    line-height: s2;
    margin-bottom: 12px
}
.introduce>div:nth-of-type(2){
    font-size: s1;
    font-weight: 200;
    color: rgb(77,85,93);
    line-height: 48px;
    margin-bottom: 32px;

}
.evaluate{
  width: w;
  height: 200px
    min-height: 200px;
    max-height: 200px;
    padding: 36px;
    background-color #fff
    border-top: 1px solid rgba(7,17,27,.1);
    border-bottom: 1px solid rgba(7,17,27,.1);
}
.evaluate>div:nth-of-type(1){
    font-size: s2;
    font-weight: 700;
    color: rgb(7,17,18)
    line-height: s2;
    margin-bottom: s1;
}
.all{

}
.all1,.all2,.all3{
    width 120px;
    height: 64px
    font-size: 24px;
    text-align: center
    line-height: 64px
    border-radius: 2px;
    margin-right: 16px;
    float left
    a{
        font-size: 16px !important;

    }
}
.all1{
    background-color :rgb(0,160,220)
    color: c;
}
.all2{
    background-color :rgb(0,160,220,.2)
    color: rgb(77,85,93)
}
.all3{
    background-color : rgba(77,85,93,0.2)
    color: rgb(77,85,93)
}
.onlyshow{
    width: w;
    height: 100px
    min-height: 100px;
    max-height: 100px;
    padding: 0px 36px;
    background-color #fff
    border-top: 1px solid rgba(7,17,27,.1);
    border-bottom: 1px solid rgba(7,17,27,.1);
    font-size: s1;
    font-weight: 700;
    color: rgb(147,153,159)
    line-height: 100px;
}
.tease{
    width :w;
    padding: 0px 36px
    background-color #fff
   
}
.teaseStart{
    padding: 32px
    width :w;
     border-bottom: 1px solid rgba(7,17,27,.1);

}
.teaseStartLeft{
    font-size: 20px
    color: rgb(147,153,159)
    line-height: 24px
    float left
}
.teaseStartRight{
    font-size: 20px
    color: rgb(147,153,159)
    line-height: 24px
    float right
    img{
        width 24px
        height 24px
        margin-left: 12px
    }
}
.teaseBottom{
    font-size: s1;
    color: rgb(7,17,27)
    line-height: 32px
}
</style>